<template>
    <div class="card">
        <div class="card-item" v-for="(item,index) in data" :key="index">
            <p class="cdname">{{item.cdname}}</p>
            <p class="has">{{item.has}}</p>
            <div class="salesth">
                <div class="intr">
                    {{item.content.intr}}
                </div>
                <p class="type">发货方式<span>{{item.content.type}}</span></p>
                <p class="time">预计回报时间<span>{{item.content.time}}</span></p>
            </div>
            <div class="cardbtn">
                <span class="price">￥{{item.price}}</span>
                <span v-if="!item.isBuy" class="nobuy">不支持购买</span>
                <span v-if="item.isBuy" class="buybtn" @click="fn_click">购买</span>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    name:"cdcard",
    props: {
        jsons : [],
    },
    data() {
        return {
            data : []
        };
    },
    computed: {

    },
    created() {
        this.data = this.jsons.cfshopping.CD
    },
    mounted() {

    },
    watch: {

    },
    methods: {
        fn_click(){
            console.log(this)
        }
    },
    components: {

    },
};
</script>

<style scoped lang="less">
.card{
    width: 100%;
    height: auto;
    .card-item{
        width: 100%;
        height: auto;
        background: #fff;
        padding: 0 .4rem;
        margin-bottom: 10px;
        box-sizing: border-box;
        p{
            margin: 0;
        }
        .cdname{
            padding: .3rem 0;
            font-size: 16px;
        }
        .has{
            font-size: 14px;
            color: #999;
        }
        .salesth{
            border-top: 0.5px #ebebeb solid;
            border-bottom: 0.5px #ebebeb solid;
            color: #999;
            font-size: 14px;
            margin: .3rem -.4rem 0 -.4rem;
            padding: .3rem .4rem;
            .intr{
               margin-bottom: .3rem; 
            }
            span{
               color: #000; 
            }
        }
        .cardbtn{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: .3rem 0;
            .price{
                font-size: 25px;
                color: #eb484a;
            }
            .buybtn{
                background: #eb484a;
                border-radius: 4px;
                height: .7rem;
                line-height: .7rem;
                padding: 0 .6rem;
                color: #fff;
                font-size: 16px;
            }
            .nobuy{
                border-radius: 4px;
                height: .7rem;
                line-height: .7rem;
                padding: 0 .6rem;
                background: #ebebeb;
                color: #333;
                font-size: 16px;

            }
        }
    }
}
</style>
